<template>
	<div class="home">
		<myHeader></myHeader>
		<div class="content container">
			<div class="content-left">
				<div class="carousel">
					<div class="box-shadow">
						<ul>
							<li>
								<img
									src="https://www.zhutibaba.com/demo/boke1/wp-content/uploads/sites/2/2018/06/b6-2-740x414.jpg"
									alt="">
							</li>
						</ul>
					</div>
				</div>
				<list :list=contentList></list>
				<!--<div class="content-list">-->
				<!--	<div class="box-shadow">-->
				<!--		<ul>-->
				<!--			<li v-for="(item, index) in contentList"-->
				<!--				:key="index">-->
				<!--				<div class="box">-->
				<!--					<h2>-->
				<!--						<nuxt-link to="">-->
				<!--							{{ item.title }}-->
				<!--						</nuxt-link>-->
				<!--					</h2>-->
				<!--					<div class="info">-->
				<!--						<div class="thumbnail">-->
				<!--							<img :src="item.thumbnail"-->
				<!--								 alt="">-->
				<!--						</div>-->
				<!--						<div class="intro">-->
				<!--							<p>{{ item.intro }}</p>-->
				<!--							<div class="intro-bottom">-->
				<!--								<div class="type-time">-->
				<!--									<nuxt-link to="">-->
				<!--										<span class="type">{{ item.type }}</span>-->
				<!--									</nuxt-link>-->
				<!--									<span class="time">{{ item.time }}</span>-->
				<!--								</div>-->
				<!--								<div class="browse-comments">-->
				<!--									<span class="browse">{{ item.browse }}浏览</span>-->
				<!--									<span class="comments">{{ item.comments }}评论</span>-->
				<!--								</div>-->
				<!--							</div>-->
				<!--						</div>-->
				<!--					</div>-->
				<!--				</div>-->
				<!--			</li>-->
				<!--		</ul>-->
				<!--	</div>-->
				<!--</div>-->
			</div>
			<div class="content-right">
				<div class="page-views">
					<pageViews sort="views"></pageViews>
				</div>
				<div class="page-comment">
					<pageViews sort="comment"></pageViews>
				</div>
				<div class="tag">
					<tag></tag>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import myHeader from '@/components/myHeader'
import tag from '@/components/tag'
import pageViews from '@/components/pageViews'
import { articleApi } from '../plugins/api'
import { dateTime } from '@/plugins/filters'
import Prism from 'prismjs'

export default {
	name: 'home',
	data () {
		return {
			contentList: []
		}
	},
	async asyncData (context) {
		var { err, data } = await articleApi.getList()
		if (err) {
			return false
		}
		data.forEach(item => {
			let con1 = decodeURI(item.content)
			let con2 = con1.replace(/<.+?>/g, '')
			let con3 = con2.replace(/\s/ig, '')
			item.content = con3.substring(0, 60)
			item.created_time = dateTime(item.created_time)
		})
		let contentList = data
		return { contentList }
	},
	comments: {
		myHeader,
		tag,
		pageViews
	}
}
</script>
<style scoped lang="less">
.content {
	margin-top: 10px;
	overflow: hidden;
	padding-bottom: 1000px;

	.content-left {
		width: 790px;
		float: left;

		.carousel {
			width: 790px;
			padding: 10px;
			box-sizing: border-box;

			.box-shadow {
				padding: 20px;
				background-color: #fff;
			}
		}

		.content-list {
			padding: 10px;

			ul {
				li {
					padding: 20px 20px 0 20px;
					overflow: hidden;
					background-color: #fff;

					&:last-child {
						.box {
							border: 0;
						}
					}

					.box {
						padding-bottom: 20px;
						border-bottom: 1px solid #e9e9e9;

						h2 {
							font-size: 26px;
							font-weight: normal;
						}

						.info {
							margin-top: 20px;
							overflow: hidden;

							.thumbnail {
								width: 210px;
								height: 150px;
								float: left;
							}

							.intro {
								width: 500px;
								height: 150px;
								float: right;
								position: relative;

								p {
									line-height: 30px;
								}

								.intro-bottom {
									font-size: 14px;
									width: 100%;
									line-height: 40px;
									overflow: hidden;
									position: absolute;
									bottom: 0;

									.type-time {
										float: left;

										.type {
											margin-right: 10px;
											padding: 5px;
											color: #409eff;
											border: 1px solid #409eff;
											border-radius: 5px;

											&:hover {
												color: #fff;
												background-color: #409eff;
											}
										}

										.time {
											font-size: 14px;
											color: #999;
										}
									}

									.browse-comments {
										color: #999;
										float: right;

										span {
											padding: 0 10px;
										}

										.browse {
											position: relative;

											&:before {
												content: '';
												width: 1px;
												height: 15px;
												margin-top: -7.5px;
												background-color: #e9e9e9;
												position: absolute;
												top: 50%;
												right: 0px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.content-right {
		width: 410px;
		float: right;
	}
}
</style>

